<template>
    <div :class="{ hideUpload: limit == uploadFileList.length }">
        <el-upload ref="upload" v-loading="uploading" action="" :list-type="listType" :limit="limit"
            :file-list="uploadFileList" :disabled="disable" :http-request="params => handleFile(params)"
            :on-remove="handleRemove" :accept="accept">

            <slot name="icon">
                <i slot="default" class="el-icon-plus"></i>
            </slot>
        </el-upload>
    </div>
</template>

<script>
import fileApi from "@/api/file";
import $baseUrl from '@/utils/baseURL'
export default {
    components: {},
    props: {
        urlList: {
            type: Array,
            default: () => []
        },
        disabled: {
            type: Boolean,
            default: false
        },
        limit: {
            type: [String, Number],
            default: null
        },
        accept: {
            type: String,
            default: ".png,.jpg,.jpeg"
        },
        listType: {
            type: String,
            default: "picture-card"
        },
        moduleType: {
            type: String,
            default: "AGRICULTURAL_PLATFORM"
        },
    },
    data() {
        return {
            uploadFileList: [],
            disable: false,
            uploading: false
        };
    },
    watch: {
        urlList(val) {
            this.uploadFileList = val;
        },
        disabled(val) {
            this.disable = val;
        }
    },
    mounted() {
        this.uploadFileList = this.urlList;
        this.disable = this.disabled;
    },
    methods: {
        handleRemove(file) {
            var index = this.uploadFileList.findIndex(a => a.name === file.name);
            if (index !== -1) {
                this.uploadFileList.splice(index, 1);
                this.getFile();
            }
        },
        // 上传文件
        handleFile(files) {
            if (this.uploadFileList.length == this.limit) {
                this.$message.warning(`最多上传${this.limit}张图片`)
                return
            }
            let { file } = files;
            let formData = new FormData();
            formData.append("file", file);
            formData.append("upDownType", "FTP");
            formData.append("moduleType", this.moduleType);
            this.uploading = false;
            fileApi.getUploadUrl(formData).then(res => {
                let filePath = res.data;
                let url = $baseUrl.webBaseUrl + filePath;
                this.uploadFileList.push({ url, name: url });
                this.getFile();
                this.$message.success("上传成功！");
                // if(res.code==1){
                //   let filePath = res.data;
                //   let url = baseURL.webBaseUrl + filePath;
                //   this.uploadFileList.push({ url, name: url });
                //   this.getFile();
                //   this.$message.success("上传成功！");
                // }else{
                //   this.uploadFileList = this.uploadFileList;
                //   this.$message.error(res.msg||"上传失败！");
                // }
            }).catch(() => {
                this.$message.error("上传失败！");
            });
        },
        getFile() {
            this.$emit("getFile", this.uploadFileList);
        },
        clearFile() {
            this.$refs.upload && this.$refs.upload.clearFiles();
        }
    }
};
</script>

<style lang="scss" scoped>
.hideUpload {
    ::v-deep .el-upload {
        display: none;
    }
}

::v-deep .el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    line-height: 146px;
    vertical-align: top;
}
</style>